<ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                template="/templates/template.xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://xmlns.jcp.org/jsf/core">

    <ui:define name="titulo">
        Dots and Boxes
    </ui:define>

    <ui:define name="topo">
        <h1 style="font-family: cursive;
            font-size: 50px;
            margin: 10px 20px 10px 40px;
            float: left">Dots and Boxes</h1>

            
            
            
        <h:form style="margin: 10px">
            <p:selectOneRadio value="1" onchange="tipoJogo(value)"/>
         </h:form>    
  
        <h:form id="frm1" style="margin: 10px; width: 300px; float: left">
            <p:selectOneRadio id="tip" value="1" onchange="tipoJogo(value)">

                <f:selectItem itemValue="1" itemLabel="Contra o computador"/>
                <f:selectItem itemValue="2" itemLabel="Online"/>
            </p:selectOneRadio>
            <br/>
            <p:selectOneRadio id="dif" value="1" onchange="dificuldadeJogo(value)">
                <f:selectItem itemValue="1" itemLabel="Fácil"/>
                <f:selectItem itemValue="2" itemLabel="Médio"/>
                <f:selectItem itemValue="3" itemLabel="Difícil"/>
            </p:selectOneRadio>

        </h:form>


           

        <h:form style="margin: 10px; width: 100px; float: right;">
            <p:commandButton style="float: right; font-size: 12px;" value="login" 
                             action="#{beanLogin.chamarLogin()}"
                             ajax="false"
                             immediate="true"/>
            <br/><br/>
            <p:commandButton style="float: right; font-size: 12px;" value="Cadastrar" 
                             action="#{beanUsuario.chamarConsulta()}"
                             ajax="false"
                             immediate="true"/>
        </h:form>

    </ui:define>

    <ui:define name="direito">
        <p style="font-family: cursive;
           font-size: 20px;
           margin: 10px 0px 0px 25px;">Usuarios Logados</p>
        <p:panel>

            <p:dataTable value="#{beanUsuario.listaUsuarios}" var="usu"
                         emptyMessage="Nenhum usuário logado"
                         id="listagem">

                <p:column>
                    <h:outputText value="#{usu.apelido}"/>
                </p:column>
            </p:dataTable>
        </p:panel>

    </ui:define>

    <ui:define name="base">
        <ui:include src="chat/chat.xhtml"/>
    </ui:define>

    <ui:define name="esquerdo">
        <p style="font-family: cursive;
           font-size: 20px;
           margin: 10px 0px 0px 60px;">Ranking</p>
        <p:panel>

            <p:dataTable value="#{beanUsuario.listaRanking}" var="usu"
                         emptyMessage="Nenhum usuário logado"
                         id="listagemRanking">

                <p:column>
                    <h:outputText value="#{usu.apelido}"/>
                </p:column>
                <p:column>
                    <h:outputText value="#{usu.pontuacao}"/>
                </p:column>
            </p:dataTable>
        </p:panel>
    </ui:define>

    <ui:define name="meio">
        <ui:include src="jogo/jogo.xhtml"/>
    </ui:define>

</ui:composition>
